/*
 * 商城数据大盘
 * @Author: along
 * @Date: 2020-01-14 09:49:00
 */
<template>
    <div class="container studentDataAnalysis">
        <!-- 学习首页指标 -->
        <shopHead
            :title="student.student_home"
            id="student_home"
            v-if=" !authResult.auth_home && !authResult.auth_app_type ? false : true"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_home"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_funel.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">学习首页访客量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="已登录用户，进入学习页的用户数量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ studentHome.index_view_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">视频浏览人数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指播放过视频的用户数量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ studentHome.course_view_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">用户浏览视频率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指视频浏览人数/学习首页访客量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span
                                v-if="studentHome.course_view_user_count !== 0 && studentHome.index_view_user_count !== 0"
                            >
                                {{ (studentHome.course_view_user_count / studentHome.index_view_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">视频总浏览量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指视频的总的播放量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ studentHome.course_view_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">人均视频查看次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指视频总浏览量/视频浏览人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="studentHome.course_view_count !== 0 && studentHome.course_view_user_count !== 0">
                                {{ (studentHome.course_view_count / studentHome.course_view_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div
                        class="zd-list"
                        :style="{marginTop: '20px'}"
                    >
                        <div class="zd-head">
                            <p class="zd-head-title">视频播放总时长</p>
                        </div>
                        <div class="zd-content">
                            <span
                                v-if="studentHome.course_play_total_duration"
                                :style="{fontSize: '17px'}"
                            >
                                {{ studentHome.course_play_total_duration | filterDate(SELF) }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div
                        class="zd-list"
                        :style="{marginTop: '20px'}"
                    >
                        <div class="zd-head">
                            <p class="zd-head-title">视频人均播放时长</p>
                        </div>
                        <div class="zd-content">
                            <span
                                v-if="studentHome.course_play_avg_duration"
                                :style="{fontSize: '17px'}"
                            >
                                {{ studentHome.course_play_avg_duration | filterDate(SELF) }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div
                        class="zd-list"
                        :style="{marginTop: '20px'}"
                    >
                        <div class="zd-head">
                            <p class="zd-head-title">视频播放人数</p>
                        </div>
                        <div class="zd-content">
                            <span
                                v-if="studentHome.course_play_user_count"
                            >
                                {{ studentHome.course_play_user_count | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 学习流量来源分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_app_type"
            >
                <div class="main-content">
                    <p class="main-content-title">学习流量来源分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_flow.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(2)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="studentFunList"
                    max-height="160"
                    height="160px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="origin"
                        label="来源"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="index_view_user_count"
                        label="访客数"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="course_view_user_count"
                        label="视频浏览人数"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="index_view_user_count"
                        label="转化率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.index_view_user_count !== 0 && scope.row.course_view_user_count !== 0">
                                {{ (scope.row.index_view_user_count / scope.row.course_view_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 学习搜索指标 -->
        <shopHead
            :title="student.student_search"
            id="student_search"
            v-if="authResult.auth_search"
        />
        <div
            class="student-home"
            v-if="authResult.auth_search"
        >
            <div class="main-content">
                <p class="main-content-title">数据展示</p>
                <div class="main-content-right">
                    <el-date-picker
                        v-model="student_search.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        @change="fnFilterData(3)"
                    />
                </div>
            </div>
            <div class="main-seat" />
            <div class="zd-data zd-data-search">
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">学习搜索次数</p>
                    </div>
                    <div class="zd-content">{{ searchList.search_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">搜索用户数</p>
                    </div>
                    <div class="zd-content">{{ searchList.search_user_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">人均搜索次数</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="学习搜索次数/搜索用户数">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">
                        <span v-if="searchList.search_count !== 0 && searchList.search_user_count !== 0">
                            {{ (searchList.search_count / searchList.search_user_count).toFixed(2) | isNaN }}
                        </span>
                        <span v-else>0</span>
                    </div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">搜索icon点击率</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="搜索icon的点击量/学习首页的曝光量">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">
                        <span v-if="searchList.search_count !== 0 && searchList.search_icon_click_count !== 0">
                            {{ (searchList.search_icon_click_count / searchList.search_count * 100).toFixed(2) | isNaN }}%
                        </span>
                        <span v-else>0</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 发现tab -->
        <shopHead
            :title="student.student_find"
            id="student_find"
            v-if=" !authResult.auth_find_tab && !authResult.auth_sing_find_tab ? false : true"
        />
        <div class="student">
            <!-- 发现tab -->
            <div
                class="student-home"
                v-if="authResult.auth_find_tab"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_find.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(4)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-tab-find">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">停留时长</p>
                            <!-- <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="发现tab的点击（切换）量/学习首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover> -->
                        </div>
                        <div class="zd-content">
                            <span>{{ findList.find_stay_time / 1000 | filterDate(SELF) }}</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">分享点击量</p>
                            <!-- <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="发现tab的点击（切换）量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover> -->
                        </div>
                        <div class="zd-content">{{ findList.find_video_share_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">标签点击量</p>
                            <!-- <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="发现tab的点击（切换）量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover> -->
                        </div>
                        <div class="zd-content">{{ findList.find_tag_click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 发现页单个icon分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_sing_find_tab"
            >
                <div class="main-content">
                    <p class="main-content-title">发现页单个icon分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_icon.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(5)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="inviteFindList"
                    max-height="160"
                    height="160px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="tag_name"
                        label="标签名"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <!-- <el-table-column
                        prop="type_image"
                        label="点击次数"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <template>
                                <a
                                    href="javascript:;"
                                    style="color: #409EFF"
                                    @click="fnShowPreview(scope.row.type_image)">查看</a>
                            </template>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        prop="click_count"
                        label="点击次数"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="stay_time"
                        label="停留时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <!-- <el-table-column
                        prop="stay_time"
                        label="停留时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
        </div>
        <!-- banner -->
        <shopHead
            :title="student.student_banner"
            id="student_banner"
            v-if=" !authResult.auth_banner && !authResult.auth_sing_banner ? false : true"
        />
        <div class="student">
            <!-- banner数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_banner"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_banner.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(6)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-find">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">banner区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="banner区域点击次数/学习首页的浏览量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="bannerList.banner_click_count !== 0 && bannerList.index_view_count !== 0">
                                {{ (bannerList.banner_click_count / bannerList.index_view_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">banner区域点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="用户在整个banner区域的点击次数之和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ bannerList.banner_click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个banner分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_sing_banner"
            >
                <div class="main-content">
                    <p class="main-content-title">单个banner分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_invite_banner.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(7)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="bannerInviteList"
                    max-height="160"
                    height="160px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="banner_no"
                        label="banner编号"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="image_url"
                        label="图片"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <template>
                                <a
                                    href="javascript:;"
                                    style="color: #409EFF"
                                    @click="fnShowPreview(scope.row.image_url)">查看</a>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="start_time"
                        label="开始时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        label="结束时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="update_time"
                        label="编辑时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.update_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="time_status"
                        label="状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.status == 1">
                                <span v-if="scope.row.time_status == 0">已隐藏</span>
                                <span v-if="scope.row.time_status == 1">已显示</span>
                                <span v-if="scope.row.time_status == 2">已结束</span>
                            </p>
                            <p v-if="scope.row.status == 0">已结束</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="click_count"
                        label="点击量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        label="点击率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader2"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="时间段"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                class="cursor-font"
                                @click="fnGetbannerView(scope.row)"
                            >查看</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 金刚区 -->
        <shopHead
            :title="student.student_jing"
            id="student_jing"
            v-if=" !authResult.auth_area && !authResult.auth_sing_area ? false : true"
        />
        <div class="student">
            <!-- 金刚区数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_area"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_jing.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(8)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-find">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">金刚区区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指金刚区区域的点击量总和/学习首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="jingList.custom_area_click_count !== 0 && jingList.index_view_count !== 0">
                                {{ (jingList.custom_area_click_count / jingList.index_view_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">金刚区区域点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指金刚区区域的点击量总和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ jingList.custom_area_click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个金刚区分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_sing_area"
            >
                <div class="main-content">
                    <p class="main-content-title">单个金刚区分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_invite_jing.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(9)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="jingInvite"
                    max-height="380"
                    height="380px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="title"
                        label="金刚区名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="image_url"
                        label="图片"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <img
                                :src="scope.row.image_url"
                                style="width:40px;height:40px;borderRadius:50%"
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="expose_count"
                        label="曝光量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        label="点击量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        label="点击率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader6"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="course_view_count"
                        label="金刚区页面内视频播放量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="course_view_count"
                        label="金刚区页面内视频播放率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader8"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.course_view_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.course_view_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 首页类目 -->
        <shopHead
            :title="student.student_type"
            id="student_type"
            v-if=" !authResult.auth_recommend && !authResult.auth_sing_recommend ? false : true"
        />
        <div class="student">
            <!-- 首页类目数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_recommend"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_type.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(10)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-find">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">首页类目区域视频点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="所有类目在首页的4个/6个视频的点击量之和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ typeList.recommend_course_click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">首页类目“查看更多”点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="所有首页类目的“查看更多”的点击量之和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ typeList.recommend_more_click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个首页类目分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_sing_recommend"
            >
                <div class="main-content">
                    <p class="main-content-title">单个首页类目分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_invite_type.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(11)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="typeinviteList"
                    max-height="230"
                    height="226px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="type_name"
                        label="类目名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="expose_count"
                        label="该栏目曝光量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="course_click_count"
                        label="首页4或6个视频的点击量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader3"
                    />
                    <el-table-column
                        prop="course_click_count"
                        label="首页视频的点击率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader4"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.course_click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.course_click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="more_click_count"
                        label="”查看更多“点击量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="more_click_count"
                        label="”查看更多“点击率"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader5"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.more_click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.more_click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 推荐视频 -->
        <shopHead
            :title="student.student_video"
            id="student_video"
            v-if="authResult.auth_video"
        />
        <div
            class="student"
            v-if="authResult.auth_video"
        >
            <div class="student-home">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="student_video.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(12)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-find">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">推荐视频点击查看率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="推荐视频的点击量/该区域的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="videoList.recommend_course_click_count !== 0 && videoList.recommend_course_view_count !== 0">
                                {{ (videoList.recommend_course_click_count / videoList.recommend_course_view_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">推荐视频点击查看量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指学习页面底部的推荐视频的点击量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ videoList.recommend_course_click_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看数据概括 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="650px"
            :close-on-click-modal="false"
            class="el-dialog-echarts"
        >
            <div class="content_left">
                <div class="content_echarts">
                    <div
                        id="echarts_al"
                        ref="echarts_al"
                        class="echarts"
                    />
                </div>
            </div>
        </el-dialog>
        <!-- 侧边导航栏 -->
        <div
            class="nav"
            v-if="true"
        >
            <div
                class="nav-cont"
                :style="{height: navHeight + 'px'}"
            >
                <div
                    v-for="(item,index) in navList"
                    :key="index"
                    class="nav-list"
                    :class="index == menuIndex ? 'nav-list-cursor' : '' "
                    @click="fnMoveMenu(index)"
                    v-if="navHeight == 50 && index == menuIndex"
                >
                    <p
                        :style="{'white-space': index == 2 || index == 3 || index == 4 ? 'nowrap' : '', 'width': index == 0 || index == 1 || index == 5 || index == 6 ? '28px' : '','textAlign': 'center' }"
                    >{{ item }}</p>
                </div>
                <div
                    v-for="(item,index) in navList"
                    :key="index"
                    class="nav-list"
                    :class="index == menuIndex ? 'nav-list-cursor' : '' "
                    @click="fnMoveMenu(index)"
                    v-if="navHeight > 50"
                >
                    <p
                        :style="{'white-space': index == 2 || index == 3 || index == 4 ? 'nowrap' : '', 'width': index == 0 || index == 1 || index == 5 || index == 6 ? '28px' : '','textAlign': 'center' }"
                    >{{ item }}</p>
                </div>
            </div>
            <p
                class="nav-foot"
                @click="fnFold()"
            >
                <i
                    class="iconfont el-icon-hand-xiangshang"
                    v-if="navHeight > 50"
                />
                <i
                    class="iconfont el-icon-hand-xiangxia"
                    v-if="navHeight == 50"
                />
            </p>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import imgPreview from '@/components/common/img-preview';
import { getDate } from '@/assets/js/utils';
export default {
    mixins: [back],
    components: {
        shopHead,
        imgPreview
    },
    data () {
        return {
            SELF: this,
            student: {
                student_home: '学习首页指标',
                student_search: '学习搜索指标',
                student_find: '发现tab',
                student_banner: 'banner',
                student_jing: '金刚区',
                student_type: '首页类目',
                student_video: '推荐视频'
            },
            dialogVisible: false,
            //侧边导航
            menuScrollTop: [],
            menuIndex: 0,
            navHeight: 0,
            navList: [],
            //推荐视频
            videoList: {},
            student_video: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //首页类目
            typeList: {},
            typeinviteList: [],
            student_invite_type: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            student_type: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //金刚区
            jingList: {},
            jingInvite: [],
            student_invite_jing: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            student_jing: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //banner数据展示
            bannerList: {},
            bannerInviteList: [],
            student_banner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            student_invite_banner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //发现tab
            inviteFindList: [],
            student_icon: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            findList: {},
            student_find: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //学习搜索指标
            searchList: {},
            student_search: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            // 学习首页指标
            studentFunList: [],
            studentHome: {},
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            student_funel: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            student_flow: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //权限
            authResult: {}
        };
    },
    filters: {
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        },
        filterDate (val, SELF) {
            return SELF.fnMinuteFormate(val);
        }
    },
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '学习数据大盘'}]);
        this.authResult = this.$route.meta.authResult;
        this.getStudentList(this.getDate(0), this.getDate(1));//获取学习首页数据展示
        this.getFlowOrigin(this.getDate(0), this.getDate(1));//获取学习流量来源分析
        this.getStudentSearch(this.getDate(0), this.getDate(1));//学习搜索指标
        this.getTabList(this.getDate(0), this.getDate(1));//发现tab

        setTimeout(()=>{
            this.getInviteTab(this.getDate(0), this.getDate(1));//发现页单个icon分析
            this.getBannerList(this.getDate(0), this.getDate(1));//获取banner数据展示
            this.getInviteBanner(this.getDate(0), this.getDate(1));//单个banner分析
            this.getJinList(this.getDate(0), this.getDate(1));//金刚区数据展示
        },1000);

        setTimeout(()=>{
            this.getInviteJin(this.getDate(0), this.getDate(1));//单个金刚区分析
            this.getTypeList(this.getDate(0), this.getDate(1));//获取首页类目数据展示
            this.getInviteType(this.getDate(0), this.getDate(1));//单个首页类目分析
            this.getVideolist(this.getDate(0), this.getDate(1));//推荐视频
        },2000);
        this.getScrollTop();
        console.log(this.authResult, '列表权限');
    },
    methods: {
        /**
         * 设置图表
         */
        setEcharts (row) {
            let echarts = document.getElementById('echarts_al');
            let my_echarts = this.$echarts.init(echarts);

            my_echarts.setOption({
                color:['#1890FF'],
                tooltip: {
                    trigger: 'axis'
                },
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    },
                    left: 28,
                    height: 8
                },
                //图表位置
                grid: {
                    top: 75,
                    bottom: 20,
                    height: 180
                },
                //x轴数据
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: row[0]
                },
                //y轴数据
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '数据',
                        type:'line',
                        data: row[1],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            });
        },

        /**
         * 选择日期
         * 1:学习首页数据展示
         * 2:学习流量来源分析
         * 3:学习搜索指标
         * 4:发现tab
         * 5:单个icon分析
         * 6:获取banner数据展示
         * 7:单个banner分析
         * 8:金刚区数据展示
         * 9:单个金刚区分析
         * 10:首页类目数据展示
         * 11:单个首页类目分析
         * 12:推荐视频
         */
        fnFilterData (type) {
            if(type == 1) {
                if(this.student_funel.date === null || this.student_funel.date == '' || this.student_funel.date.length < 1) {
                    this.getStudentList(this.getDate(0), this.getDate(1));
                }else {
                    this.getStudentList(getDate(new Date(this.student_funel.date[0])) * 1000, getDate(new Date(this.student_funel.date[1])) * 1000);
                }
            } else if (type == 2) {
                if(this.student_flow.date === null || this.student_flow.date == '' || this.student_flow.date.length < 1) {
                    this.getFlowOrigin(this.getDate(0), this.getDate(1));
                }else {
                    this.getFlowOrigin(getDate(new Date(this.student_flow.date[0])) * 1000, getDate(new Date(this.student_flow.date[1])) * 1000);
                }
            } else if (type == 3) {
                if(this.student_search.date === null || this.student_search.date == '' || this.student_search.date.length < 1) {
                    this.getStudentSearch(this.getDate(0), this.getDate(1));
                }else {
                    this.getStudentSearch(getDate(new Date(this.student_search.date[0])) * 1000, getDate(new Date(this.student_search.date[1])) * 1000);
                }
            } else if (type == 4) {
                if(this.student_find.date === null || this.student_find.date == '' || this.student_find.date.length < 1) {
                    this.getTabList(this.getDate(0), this.getDate(1));
                }else {
                    this.getTabList(getDate(new Date(this.student_find.date[0])) * 1000, getDate(new Date(this.student_find.date[1])) * 1000);
                }
            } else if (type == 5) {
                if(this.student_icon.date === null || this.student_icon.date == '' || this.student_icon.date.length < 1) {
                    this.getInviteTab(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteTab(getDate(new Date(this.student_icon.date[0])) * 1000, getDate(new Date(this.student_icon.date[1])) * 1000);
                }
            } else if (type == 6) {
                if(this.student_banner.date === null || this.student_banner.date == '' || this.student_banner.date.length < 1) {
                    this.getBannerList(this.getDate(0), this.getDate(1));
                }else {
                    this.getBannerList(getDate(new Date(this.student_banner.date[0])) * 1000, getDate(new Date(this.student_banner.date[1])) * 1000);
                }
            } else if (type == 7) {
                if(this.student_invite_banner.date === null || this.student_invite_banner.date == '' || this.student_invite_banner.date.length < 1) {
                    this.getInviteBanner(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteBanner(getDate(new Date(this.student_invite_banner.date[0])) * 1000, getDate(new Date(this.student_invite_banner.date[1])) * 1000);
                }
            } else if (type == 8) {
                if(this.student_jing.date === null || this.student_jing.date == '' || this.student_jing.date.length < 1) {
                    this.getJinList(this.getDate(0), this.getDate(1));
                }else {
                    this.getJinList(getDate(new Date(this.student_jing.date[0])) * 1000, getDate(new Date(this.student_jing.date[1])) * 1000);
                }
            } else if (type == 9) {
                if(this.student_invite_jing.date === null || this.student_invite_jing.date == '' || this.student_invite_jing.date.length < 1) {
                    this.getInviteJin(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteJin(getDate(new Date(this.student_invite_jing.date[0])) * 1000, getDate(new Date(this.student_invite_jing.date[1])) * 1000);
                }
            } else if (type == 10) {
                if(this.student_type.date === null || this.student_type.date == '' || this.student_type.date.length < 1) {
                    this.getTypeList(this.getDate(0), this.getDate(1));
                }else {
                    this.getTypeList(getDate(new Date(this.student_type.date[0])) * 1000, getDate(new Date(this.student_type.date[1])) * 1000);
                }
            } else if (type == 11) {
                if(this.student_invite_type.date === null || this.student_invite_type.date == '' || this.student_invite_type.date.length < 1) {
                    this.getInviteType(this.getDate(0), this.getDate(1));
                }else {
                    this.getInviteType(getDate(new Date(this.student_invite_type.date[0])) * 1000, getDate(new Date(this.student_invite_type.date[1])) * 1000);
                }
            } else if (type == 12) {
                if(this.student_video.date === null || this.student_video.date == '' || this.student_video.date.length < 1) {
                    this.getVideolist(this.getDate(0), this.getDate(1));
                }else {
                    this.getVideolist(getDate(new Date(this.student_video.date[0])) * 1000, getDate(new Date(this.student_video.date[1])) * 1000);
                }
            }
        },

        /**
         * 指定范围时间戳转换小时/分钟/秒
         * @param   {val}           Number      //时间戳
         * @param   {Booleanc}      type        //false:小时/分钟/秒  true:天/小时/分钟/秒
         */
        fnMinuteFormate(second){
            const days = Math.floor(second / 86400);
            const hours = Math.floor((second % 86400) / 3600);
            const minutes = Math.floor(((second % 86400) % 3600) / 60);
            const seconds = Math.floor(((second % 86400) % 3600) % 60);
            const forMatDate = {
                days: days,
                hours: hours < 10 ? ('0' + hours) : hours,
                minutes: minutes < 10 ? ('0' + minutes) : minutes,
                seconds: seconds < 10 ? ('0' + seconds) : seconds
            };

            return forMatDate.days + '天' + forMatDate.hours + ':' + forMatDate.minutes + ':' + forMatDate.seconds;
        },
        /**
         * 学习首页指标
         */
        getStudentList (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_index_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.studentHome = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 学习流量来源分析
         */
        getFlowOrigin (start_time, end_time) {
            let list = [];

            this.$post('/student/statistic_study%5Cget_app_type_statistic', {
                start_time: parseInt(start_time / 1000),
                end_time: parseInt(end_time / 1000)
            }, resp => {
                if (resp.code == 1) {
                    for(let key in resp.data) {
                        list.push({
                            origin: key,
                            index_view_user_count: resp.data[key]['index_view_user_count'],
                            course_view_user_count: resp.data[key]['course_view_user_count']
                        });
                    }
                    this.studentFunList = list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 学习搜索指标
         */
        getStudentSearch (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_search_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.searchList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 发现tab
         */
        getTabList (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_find_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.findList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 发现页单个icon分析
         */
        getInviteTab (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_single_find_tag_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.inviteFindList = resp.data.tag_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取banner数据展示
         */
        getBannerList (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_banner_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.bannerList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 单个banner分析
         */
        getInviteBanner (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_single_banner_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000,
                type: 1
            }, resp => {
                if (resp.code == 1) {
                    this.bannerInviteList = resp.data.banner_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 查看单个banner分析24小时数据
         */
        fnGetbannerView (row) {
            let x_data = [],
                y_data = [];

            this.$post('/student/statistic_study%5Cget_single_banner_statistic',{
                start_time: row.start_time,
                end_time: row.end_time,
                type: 2,
                banner_no: row.banner_no
            }, resp => {
                if (resp.code == 1) {
                    resp.data.banner_view_list.map(item => {
                        x_data.push(this.gethous(item.time));
                        y_data.push(item.click_count);
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });

            setTimeout(()=>{
                this.setEcharts([
                    x_data,
                    y_data
                ]);
            },500);

            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * 获取金刚区数据展示
         */
        getJinList (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_custom_area_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.jingList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 单个金刚区分析
         */
        getInviteJin (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_single_custom_area_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.jingInvite = resp.data.custom_area_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取首页类目数据展示
         */
        getTypeList (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_recommend_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.typeList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 单个类目分析
         */
        getInviteType (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_single_recommend_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.typeinviteList = resp.data.recommend_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 推荐视频
         */
        getVideolist (start_time, end_time) {
            this.$post('/student/statistic_study%5Cget_recommend_course_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.videoList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * auth_home:学习首页数据展示
         * auth_app_type:学习流量来源分析
         * auth_search:学习搜索数据展示
         * auth_find_tab:发现tab数据展示
         * auth_sing_find_tab:发现页单个icon分析
         * auth_banner:banner数据展示
         * auth_sing_banner:单个banner分析
         * auth_area:金刚区数据展示
         * auth_sing_area:单个金刚区分析
         * auth_recommend:首页类目数据展示
         * auth_sing_recommend:单个首页类目分析
         * auth_video:推荐视频
         */
        getScrollTop () {
            this.$nextTick(() => {
                this.menuScrollTop = [];

                const student_home = !this.authResult.auth_home && !this.authResult.auth_app_type ? 0 : document.getElementById('student_home').offsetTop,
                    student_search = !this.authResult.auth_search ? 0 : document.getElementById('student_search').offsetTop,
                    studend_tab = !this.authResult.auth_find_tab && !this.authResult.auth_sing_find_tab ? 0 : document.getElementById('student_find').offsetTop,
                    student_banner = !this.authResult.auth_banner && !this.authResult.auth_sing_banner ? 0 : document.getElementById('student_banner').offsetTop,
                    student_area = !this.authResult.auth_area && !this.authResult.auth_sing_area ? 0 : document.getElementById('student_jing').offsetTop,
                    student_type = !this.authResult.auth_recommend && !this.authResult.auth_sing_recommend ? 0 : document.getElementById('student_type').offsetTop,
                    student_video = !this.authResult.auth_video ? 0 : document.getElementById('student_video').offsetTop;

                this.menuScrollTop.push(
                    student_home,
                    student_search,
                    studend_tab,
                    student_banner,
                    student_area,
                    student_type,
                    student_video
                );

                let list = [];

                this.menuScrollTop.map(item => {
                    if (item !== 0) {
                        list.push(item);
                    }
                });
                this.menuScrollTop = list;

                //权限菜单
                const navList = [
                    student_home ? '首页指标' : '',
                    student_search ? '搜索指标' : '',
                    studend_tab ? 'tab' : '',
                    student_banner ? 'banner' : '',
                    student_area ? '金刚区' : '',
                    student_type ? '首页类目' : '',
                    student_video ? '推荐视频' : '',
                ];

                navList.map(item => {
                    if (item !== '') {
                        this.navList.push(item);
                    }
                });

                this.navHeight = this.navList.length * 50;

                let time_stamp = 0;

                window.addEventListener('scroll', () => {
                    let scrollTop = document.querySelector('.el-main').scrollTop;
                    let time = new Date().getTime();

                    if (time - time_stamp > 20) {
                        for (let i=0; i<= this.menuScrollTop.length; i++) {
                            if (i > this.menuScrollTop.length - 2) {
                                return;
                            }
                            if (this.menuScrollTop[i] !== 0) {
                                if (scrollTop <= this.menuScrollTop[0]) {
                                    this.menuIndex = 0;
                                }
                                if (scrollTop > this.menuScrollTop[i] && scrollTop <= this.menuScrollTop[i+1]) {
                                    this.menuIndex = i + 1;
                                }
                            }
                        }
                    }
                }, true);
            });
        },

        /**
         * 侧边栏折叠
         */
        fnFold () {
            this.navHeight = this.navHeight > 50 ? 50 : this.navList.length * 50;
        },

        /**
         * 点击侧边栏
         */
        fnMoveMenu (index) {
            document.querySelector('.el-main').scrollTo(0,this.menuScrollTop[index]);
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 设置表头
         */
        renderHeader(h, {}){
            return h('span', {}, [
                h('span', {}, '点击率'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '单个icon的点击量/发现tab页面的曝光量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader2(h, {}){
            return h('span', {}, [
                h('span', {}, '点击率'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '此banner的点击量/整个banner区域的浏览量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader3(h, {}){
            return h('span', {}, [
                h('span', {}, '首页4或6个视频的点击量'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '该类目在首页的4或6个视频的点击量之和' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader4(h, {}){
            return h('span', {}, [
                h('span', {}, '首页视频的点击率'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '指该类目首页的4或6个视频点击量之和/该类目的总曝光量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader5(h, {}){
            return h('span', {}, [
                h('span', {}, " “查看更多”点击率 "),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '该类目的“查看更多”的点击量之和/该类目的总曝光量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader6(h, {}){
            return h('span', {}, [
                h('span', {}, "点击率"),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '指单个金刚区的点击量/所有金刚区的点击量之和' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader7(h, {}){
            return h('span', {}, [
                h('span', {}, "金刚区页面内视频播放量"),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '金刚区内的视频的总访问次数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        renderHeader8(h, {}){
            return h('span', {}, [
                h('span', {}, "金刚区页面内视频播放率"),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '单个金刚区内的视频的总访问次数/该金刚区页面的浏览量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 0 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 15px 30px 15px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .main-flow {
        width: 100%;
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
    }
    .zd-data-search .zd-list {
        width: calc(100% / 4);
    }
    .zd-data-find .zd-list {
        width: calc(100% / 2);
    }
    .zd-tab-find .zd-list {
        width: calc(100% / 3);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .studentDataAnalysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
    }
</style>